<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>

<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.9.0.custom.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="css/start/jquery-ui-1.9.0.custom.min.css" />
    <link rel="stylesheet" type="text/css" href="css/layout-default-latest.css" />



<script type="text/javascript">
var isReady = false;
function getSelectedKPIs()
{
    var kpis = [];
    var i = 0;
    $('input:checked').each(function(){
        kpis[i] = $(this).attr('report_id');
        i++;
    });
    return kpis;
}


$(document).ready(function () {
    parseFavourites();
});

function parseFavourites()
{
    $.ajax({
        type: "GET",
        url: "data/measures_menu.xml",
        dataType: "xml",
        success: function(xml) {
            $(xml).children().find('report[report_id=""]').each(function(){
                var template  = '<p><form>'+
                        '   <fieldset class="ui-widget ui-widget-content" style="width: 90%">'+
                        '       <legend class="ui-widget-header ui-corner-all"><div>' + decodeURIComponent($(this).attr('label')) +'</div></legend>';


                $(this).find('report').each(function(){
                    template+= '<input checked="checked" type="checkbox" report_id="' + $(this).attr('report_id') + '">' + decodeURIComponent($(this).attr('label')) + '</input><br />';
                });

                template+=      '   </fieldset>'+
                        '</form></p>';
                $('#favourites').append(template);
            });
            $('input[type = checkbox]').change(function(){
                window.top.favouriteGotChangedFromChild();
            });
            isReady = true;
        }
    });
}



</script>
<style type="text/css">
    body {
        padding: 0 0 0 0;
        margin: 0 0 0 0;

    }
</style>
    <style type="text/css">
        fieldset { width: 400px; }
        fieldset legend { width: 100%; }
        fieldset legend div { margin: 0.3em 0.5em; }
        fieldset .field { margin: 0.5em; padding: 0.5em; }
        fieldset .field label { margin-right: 0.4em; }
    </style>

</head>

<body>
<div id="favourites">

</div>


</body>
</html>